<template>
  <div id="AnimatedRectangle"></div>
</template>

<script>
export default {
  name:'AnimatedRectangle',
  methods:{
    // JavaScript Document
    // 动画矩形
    AnimatedRectangle(objectID, label, width, height, xJust, yJust) {
      this.objectID = objectID ; // 物体的ID
      this.label = label ; // 物体的标签
      this.width = width ; // 宽度
      this.height = height ; // 高度
      this.xJustify = xJust ; // x位置信息
      this.yJustify = yJust ; // y位置信息
      this.addToScene = true ; // 是否加入画布
    },
    // 获得最左侧x坐标
    animatedRectangleLeft() {
      var xPos ;
      if(this.xJustify == 'center') {
        xPos = parseInt(this.x - this.width/2) ;
      }
      else if(this.xJustify == 'left') {
        xPos = this.x ;
      }
      else if(this.xJustify == 'right') {
        xPos = parseInt(this.x - this.width) ;
      }
      return xPos ;
    },
    // 获得最右侧x坐标
    animatedRectangleRight() {
      var xPos ;
      if(this.xJustify == 'center') {
        xPos = parseInt(this.x + this.width/2) ;
      }
      else if(this.xJustify == 'left') {
        xPos = parseInt(this.x + this.width) ;
      }
      else if(this.xJustify == 'right') {
        xPos = this.x ;
      }
      return xPos ;
    },
    // 获得最上侧y坐标
    animatedRectangleTop() {
      var yPos ;
      if(this.yJustify == 'center') {
        yPos = parseInt(this.y - this.height/2) ;
      }
      else if(this.yJustify == 'top') {
        yPos = this.y ;
      }
      else if(this.yJustify == 'bottom') {
        yPos = parseInt(this.y - this.height) ;  
      }
      return yPos ;
    },
    // 获得最下侧y坐标
    animatedRectangleBottom() {
      var yPos ;
      if(this.yJustify == 'center') {
        yPos = parseInt(this.y + this.height/2) ;
      }
      else if(this.yJustify == 'top') {
        yPos = parseInt(this.y + this.height) ;
      }
      else if(this.yJustify == 'bottom') {
        yPos = this.y ;
      }
      return yPos ;
    },
    // 获得中间的x坐标
    animatedRectangleCenterX() {
      var xPos ;
      if(this.xJustify == 'center') {
        xPos = this.x ;
      }
      else if(this.xJustify == 'left') {
        xPos = parseInt(this.x + this.width/2) ;
      }
      else if(this.xJustify == 'right') {
        xPos = parseInt(this.x - this.width/2) ;
      }
      return xPos ;
    },
    // 获得中间的y坐标
    animatedRectangleCenterY() {
      var yPos ;
      if(this.yJustify == 'center') {
        yPos = this.y ;
      }
      else if(this.yJustify == 'top') {
        yPos = parseInt(this.y + this.height/2) ;
      }
      else if(this.yJustify == 'bottom') {
        yPos = parseInt(this.y - this.height/2) ;
      }
      return yPos ;
    },
    // 画图
    animatedRectangleDraw(ctx) {
      var startX ; // 左上角的X坐标
      var startY ; // 左上角的Y坐标
      var labelX ; // 文字的X坐标
      var labelY ; // 文字的Y坐标
      // 通过justX和justY来计算左上角点的坐标和文字的坐标
      if(this.xJustify.toUpperCase() == 'LEFT') {
        startX = this.x ;
        labelX = this.x + this.width/2 ;
      }
      else if(this.xJustify.toUpperCase() == 'CENTER') {
        startX = this.x - this.width/2 ;
        labelX = this.x ;
      }
      else if(this.xJustify.toUpperCase() == 'RIGHT') {
        startX = this.x - this.width ;
        labelX = this.x - this.width/2 ;
      }
      if(this.yJustify.toUpperCase() == 'TOP') {
        startY = this.y ;
        labelY = this.y + this.height/2 ;
      }
      else if(this.yJustify.toUpperCase() == 'CENTER') {
        startY = this.y - this.height/2 ;
        labelY = this.y ;
      }
      else if(this.yJustify.toUpperCase() == 'BOTTOM') {
        startY = this.y - this.height ;
        labelY = this.y - this.height/2 ;
      }
      // 开始画图
      ctx.beginPath() ;
      // 设置透明度
      ctx.globalAlpha = 1.0 ;
      // 画背景
      ctx.moveTo(startX, startY) ;
      ctx.lineTo(startX+this.width, startY) ;
      ctx.lineTo(startX+this.width, startY+this.height) ;
      ctx.lineTo(startX, startY+this.height) ;
      ctx.fillStyle = this.backgroundColor ;
      ctx.fill() ;
      // 画外框
      ctx.moveTo(startX, startY) ;
      ctx.lineTo(startX+this.width, startY) ;
      ctx.lineTo(startX+this.width, startY+this.height) ;
      ctx.lineTo(startX, startY+this.height) ;
      ctx.lineTo(startX, startY) ;
      ctx.strokeStyle = this.foregroundColor ;
      ctx.lineWidth = 2 ;
      ctx.stroke() ;
      // 写文字
      ctx.font = "10px Arial" ;
      ctx.textAlign = "center" ;
      ctx.textBaseline = "middle" ;
      ctx.fillStyle = this.foregroundColor ;
      ctx.fillText(this.label, labelX, labelY) ;
      // 判断是否需要画高亮的圆
      if(this.highlighted) {
        ctx.beginPath() ;
        // 设置透明度
        ctx.globalAlpha = this.alpha;
        // 画背景
        ctx.moveTo(startX , startY) ;
        ctx.lineTo(startX+this.width , startY) ;
        ctx.lineTo(startX+this.width , startY+this.height) ;
        ctx.lineTo(startX , startY+this.height) ;
        ctx.lineTo(startX, startY) ;
        ctx.fillStyle = this.highlightColor ;
        ctx.fill() ;
      }
    },
    // 获得箭头的头部坐标
    animatedRectangleGetArrowHeadPoint(fromX, fromY) {
      var xDelta ;
      var yDelta ;
      var xPos ;
      var yPos ;
      // x
      if(this.left() > fromX) {
        xDelta = this.left() - fromX ;
        xPos = this.left() ;
      }
      else if(fromX > this.right()) {
        xDelta = fromX - this.right() ;
        xPos = this.right() ;
      }
      else {
        xDelta = 0 ;
        xPos = this.centerX() ;
      }
      // y
      if(this.bottom() > fromY) {
        yDelta = this.bottom() - fromY ;
        yPos = this.top() ;
      }
      else if(fromY > this.top()) {
        yDelta = fromY - this.top() ;
        yPos = this.bottom() ;
      }
      else {
        yDelta = 0 ;
        yPos = this.centerY() ;
      }
      // 比较delta
      if(xDelta > yDelta) {
        yPos = this.centerY() ;
      }
      else {
        xPos = this.centerX() ;
      }
      return [xPos, yPos] ;
    },
    // 获得箭头的尾部坐标
    animatedRectangleGetArrowTailPoint(fromX, fromY) {
      return this.getArrowHeadPoint(fromX, fromY) ;
    }
  }
}
</script>

<style>

</style>